<template>
  <div>
    <Nav :title="title" :back="back"></Nav>
    <div class="title">
      <div class="titleContainer">
        <img class="titleImg" :src="value.pic" />
        <div class="titleName">{{value.title}}</div>
        <div class="titleYears">{{value.labels[1]}} · {{value.labels[0]}}</div>
        <div class="likeAndcommit">
          <span class="like">
            <span class="likeNum">123456</span>
            <span class="likeTxt">人喜欢</span>
          </span>
          <span class="commit">
            <span class="likeNum">{{value.evaluate}}</span>
            <span class="likeTxt">条评论</span>
          </span>
        </div>
      </div>
    </div>
    <div class="detail">
      <img class="coverImg" :src="value.pic" />
      <div class>
        <div class="detailItem">
          <span class="detailTitle">评分</span>
          <div class="box">
            <div v-for="item in arr" :key="item.key">
              <img v-if="item>=1" src="../assets/images/icon/star.png" />
              <img v-else src="../assets/images/icon/none-star.png" />
            </div>
            <span class="raiting">{{value.raiting}}</span>
          </div>
        </div>
        <div class="detailItem">
          <span class="detailTitle">详情</span>
          <span class>{{value.labels}}</span>
        </div>
      </div>
    </div>
    <div class="line">
      <img
        class="collect icon"
        :src="value.collected?require('../assets/images/icon/collection.png'):require('../assets/images/icon/collection-anti.png')"
        @click="collect(value._id,value.collected)"
      />
      <img class="share icon" src="../assets/images/icon/share.png" />
    </div>
  </div>
</template>

<script>
import movie from "../models/movie";
import MovieCollect from "../models/movieCollected";
export default {
  data() {
    return {
      title: "电影详情",
      back: "/movieList",
      value: [],
      arr: []
    };
  },
  async mounted() {
    console.log(this.$route.query.id);
    let id = this.$route.query.id;
    var value = [];
    // 遍历所有数据库
    let arr = ["inTheaters", "comingSoon", "top250"];
    for (let item of arr) {
      var res = await movie(item);
      value.push(...res.data.res);
    }
    // 找到对应id
    var result = value.find(res => {
      return res._id == id;
    });
    this.value = result;

    this.transformStart(this.value.raiting);
  },
  methods: {
    transformStart(num) {
      let arr = [];
      for (let i = 0; i < 5; i++) {
        if (num > 2) {
          arr.push(2);
        } else if (num > 0) {
          arr.push(Number(num.toFixed(1)));
        } else {
          arr.push(0);
        }
        num = num - 2;
      }
      this.arr = arr;
    },

    //收藏按钮
    async collect(id, collected) {
      var state;
      if (collected) {
        state = false;
      } else {
        state = true;
      }
      await MovieCollect(id, state); //请求收藏路由，操作数据库
      var value = this.value;
      value.collected = state;
      this.value = value;
    }
  }
};
</script>

<style scoped>
.title {
    margin: 0;
  height: 360px;
  overflow: hidden;
  position: relative;
}
.titleImg {
  position: absolute;
  z-index: -1;
  width: 150%;
  translate: -100px -100px;
  filter: blur(50px);
}
.titleName {
  color: #fff;
  font-size: 60px;
  margin-bottom: 30px;
}
.titleContainer {
  padding: 40px 30px;
}
.titleYears {
  color: #f9f9f9;
  font-size: 36px;
  margin-bottom: 50px;
}
.likeAndcommit {
  font-size: 30px;
}
.likeNum {
  color: red;
}
.likeTxt {
  color: #888;
}
.like {
  margin-right: 30px;
}
.coverImg {
  width: 220px;
  height: 300px;
  position: absolute;
  top: -240px;
  right: 20px;
  z-index: 10;
}
.detail {
  position: relative;
}
.detail {
  background-color: #fff;
  padding: 30px;
}
.box img {
  width: 30px;
  height: 30px;
}

.detailItem,
.box {
  display: flex;
  align-items: center;
}
.detailTitle {
  margin-right: 20px;
  color: #999;
}
.detailItem {
  font-size: 30px;
  margin-bottom: 20px;
  color: #666;
}
.line {
  margin: 60px 10px;
  border-bottom: 2px solid rgb(189, 187, 187);
  position: relative;
}
.icon {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.collect {
  top: -40px;
  right: 100px;
}
.share {
  top: -40px;
  right: 0px;
}
</style>